<template>
  <transition name="slide-fade">
    <div style="height: 100%">
      <img src="../assets/imgs/indexBg1.jpg" alt="">
      <el-container>
        <el-header>房间号{{room_id}}</el-header>
          <div class="card" :style="cardStyle">
            <div class="front">
              <img src="../assets/imgs/front.png" alt="">
              <span class="frontText">
                  您的指令是
              </span>
              <div class="cardText">
                  {{code}}
              </div>
            </div>
            <div class="back"  @click="showCard()">
              <img src="../assets/imgs/back.png" alt="">
              <span class="backText">
                查看指令
              </span>
            </div>

          </div>
        <div class="timeBox">
          您只有<span class="time">{{time}}</span>秒时间了
        </div>
        </el-container>
    </div>

  </transition>
</template>

<script>

  export default {
    name: 'show',
    data:()=>({
      code:'',
      room_id:'1',
      player_id:'2',
      cardStyle:{
        'transform': 'rotateY(0deg)',
        '-ms-transform': 'rotateY(0deg)',
        '-moz-transform': 'rotateY(0deg)',
        '-webkit-transform': 'rotateY(0deg)',
        '-o-transform': 'rotateY(0deg)'
      },
      time:3,
      timeDown:function () {

      }
    }),
    methods:{
      goBack(){


        // 禁止回退

        history.pushState(null, null, null,null,null);
        return false
      },
      showCard(){
        this.cardStyle = {
          'transform': 'rotateY(-540deg)',
          '-ms-transform': 'rotateY(-540deg)',
          '-moz-transform': 'rotateY(-540deg)',
          '-webkit-transform': 'rotateY(-540deg)',
          '-o-transform': 'rotateY(-540deg)'
        }
        this.timeDown = setInterval(this.cutdowm,1000)
      },
      cutdowm() {
        this.time--;
        if(this.time  == 0 ){
          clearInterval(this.timeDown)
          window.localStorage.setItem('code',this.code)
          this.$router.replace({name: 'prepare',params:{room_id:this.room_id,player_id:this.player_id}})
        }
      },

    },
    beforeCreate(){

    },

    created(){

      this.room_id = this.$route.params.room_id || window.localStorage.getItem('room_id');
      this.player_id = this.$route.params.player_id || window.localStorage.getItem('player_id')
      window.localStorage.setItem('room_id',this.room_id)
      window.localStorage.setItem('player_id',this.player_id)
      this.$axios.post(this.urlList.authUrl + '/api/game/get_subject',{
        token:window.localStorage.getItem('token'),
        room_id:this.room_id,
        player_id:this.player_id
      },{headers: {'Content-Type': 'application/json'}}).then((res)=>{
        this.code = res.data.data.word
      })

    },
    mounted(){
      if (window.history && window.history.pushState) {
        history.pushState(null, null, null,null,null);
        window.addEventListener('popstate', this.goBack, false);
      }
    }
  }
</script>

<style scoped>
  .el-container.is-vertical{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
  }
  .el-header {
    background:url('../assets/imgs/topBG.jpg') no-repeat;
    background-size:cover;
    background-position:bottom right;
    color: #fff;
    text-align: center;
    line-height: 60px;
  }
  .card{
    width: 60%;
    height: 60%;
    margin:20% auto;
    position: relative;
    transform-style:preserve-3d;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
  }
  img{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .front,.back{
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .front{
    z-index: 2;
    transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }
  .backText{
    display: block;
    position: absolute;
    font-size: 1.2em;
    color: #f8d883;
    text-shadow:0px 2px 16px gold;
    left: 50%;
    bottom: 10%;
    width: 100%;
    text-align: center;
    letter-spacing: 0.4em;
    transform: translate(-50%,-50%);
  }
  .frontText{
    display: block;
    position: absolute;
    font-size: 14px;
    font-weight: 700;
    color: #ba9d8d;
    left: 50%;
    top: 10%;
    letter-spacing: 0.2em;
    width: 100%;
    text-shadow: 0 2px 2px #000;
    text-align: center;
    transform: translate(-50%,-50%);
  }
  .cardText{
    display: block;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 2em;
    text-shadow: 0 2px 2px #000;
    font-weight: 700;
    color: #fff;
    top: 50%;
  }
  .timeBox{
    text-align: center;
    color:#ba9d8d ;
  }
  .time{
    color: red;
    margin: 0 4px;
  }
</style>
